<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟-time</title>
    <meta name="Keywords" content="关键词，关键词">
    <meta name="Description" content="">
    <style>
    *{margin:0;padding: 0;}
    body{background-color: #000;}
    #clock{margin:150px auto;display:block;}
    </style>
</head>
<body>
    <canvas id="clock" width="500" height="500">
        你的浏览器不支持，请更换新版的浏览器！！
    </canvas>
    <script>
        var clock=document.getElementById('clock');
        var cxt=clock.getContext('2d');

    function darw(){
         // 画表盘
        cxt.clearRect(0,0,500,500)
        cxt.lineWidth=10;
        cxt.strokeStyle="blue";
        cxt.beginPath();
        cxt.arc(250,250,200,0,360,false);//圆点255 255 半径200 从0到360度 顺/逆时针
        // cxt.fill();//画圆
        cxt.stroke();//划线
        cxt.closePath();

        // 获取时间
        var now=new Date();
        // alert(now);
        var sec=now.getSeconds();
        var min=now.getMinutes();
        var hour=now.getHours();
            hour=hour + min/60;
            hour=hour>12?hour-12:hour;
        // alert(sec);
        
       // 时间刻度
        for(var i=0;i<12;i++){
            cxt.save();
            cxt.lineWidth=10;
            cxt.strokeStyle="red"
            cxt.translate(250,250);
            cxt.rotate(30*i*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-170);
            cxt.lineTo(0,-195);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
        }
        // 分钟刻度
        for(var i=0;i<60;i++){
            cxt.save();
            cxt.lineWidth=10;
            cxt.strokeStyle="#fff"
            cxt.translate(250,250);
            cxt.rotate(6*i*Math.PI/180);
            cxt.beginPath();
            cxt.moveTo(0,-185);
            cxt.lineTo(0,-195);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
        }
        // 画时钟
        // 时针
        cxt.save();
        cxt.lineWidth=8;
        cxt.strokeStyle="yellow";
        cxt.translate(250,250);
        cxt.rotate(hour*30*Math.PI/180);
        cxt.beginPath();
        cxt.moveTo(0,-100);
        cxt.lineTo(0,10);
        cxt.stroke();
        cxt.closePath();
        cxt.restore();
        // 分针
        cxt.save();
        cxt.lineWidth=5;
        cxt.strokeStyle="green";
        cxt.translate(250,250);
        cxt.rotate(min*6*Math.PI/180);
        cxt.beginPath();
        cxt.moveTo(0,-130);
        cxt.lineTo(0,15);
        cxt.stroke();
        cxt.closePath();
        cxt.restore();
        // 秒针
        cxt.save();
        cxt.lineWidth=3;
        cxt.strokeStyle="red";
        cxt.fillStyle="gray";
        cxt.translate(250,250);
        cxt.rotate(sec*6*Math.PI/180);
        cxt.beginPath();
        cxt.moveTo(0,-150);
        cxt.lineTo(0,20);
        cxt.stroke();
        cxt.closePath();
        // 圆心
        cxt.beginPath();
        cxt.arc(0,0,5,0,360,false);
        cxt.fill();
        cxt.stroke();
        cxt.closePath();
        // 针脚
        cxt.beginPath();
        cxt.arc(0,-130,5,0,360,false);
        cxt.fill();
        cxt.stroke();
        cxt.closePath();

        cxt.restore();
       
        }

        setInterval(darw,1000);
    </script>
</body>
</html>